import React from 'react';
import {Link} from "react-router-dom";
import {Button, Switch, Tooltip} from "antd";
import { QuestionCircleOutlined } from '@ant-design/icons';
import GUtils from "@/utils";

const DeviceApiOp = {
    buttonEvent:"开关",
    wifiLock:"Wifi锁",
    buttonLock:"按键锁",

}
const DeviceSwitch=({children,...rest})=><div>
    <Switch checkedChildren="开" unCheckedChildren="关" {...rest}/>
    <Tooltip placement="top" title={children}>
        <QuestionCircleOutlined className="tip-icon"/>
    </Tooltip>
</div>
const Config = (Action) => {
    const Handlers = {

        updateMqtt(vo){
            Action.preUpdateMqtt(vo);
        },
        /**
         * @param vo
         * @param op 操作
         * @param opName 操作名称， 打开，关闭，获取
         * @param opValue 操作值
         */
        doDeviceApi(vo, op){
            let opValue = vo[op];
            let isOn =false;
            switch (op) {
                case "buttonEvent":
                    isOn=[2,4,6,8].includes(opValue);
                    opValue = isOn ? 1: 2;
                    break;
                default:
                    isOn = 1==opValue;
                    opValue = isOn ? 2 : 1;
            }

            let opName = isOn ? "关闭" : "打开";

            let opTitle =DeviceApiOp[op];
            GUtils.confirm(opTitle,<div>确认 <b>{opName}</b> 设备[{vo.uid}]的<b>{opTitle}</b> 吗?</div>,()=>{
                Action.doDeviceApi(vo.id, op, opValue);
            });
        },

        doReset(vo){
            let opTitle ="恢复出厂设置";
            GUtils.confirm(opTitle,<div>确认对设备[{vo.uid}] <b>{opTitle}</b> 吗?</div>,()=>{
                Action.doDeviceApi(vo.id, "Reset", "1");
            });
        },
        doGetDeviceInfo(vo ,opValue){
            let opTitle = opValue==1?"基础信息":"电压信息";
            GUtils.confirm(opTitle,<div>确认 <b>刷新</b> 设备[{vo.uid}]的<b>{opTitle}</b> 吗?</div>,()=>{
                Action.doDeviceApi(vo.id, "deviceInfo", opValue);
            });
        }

    }
    const columns = [
        {title: 'ID',dataIndex: 'uid',width: 60, render:(v)=><Link to={`detail/view?id=${v}`}>{v}</Link>},
        {title:"名称",dataIndex:"name",width:180, render(v,vo){
            return <div>
                <b>{v}</b>
                <div>操作时间：{GUtils.dateTimeFormatter(vo.opTime)}</div>
                <div>刷新时间：{GUtils.dateTimeFormatter(vo.refreshTime)}</div>
            </div>
            }},
        {title:"基本信息",dataIndex:"deviceMac",width:130, render(v,vo){
            return <div>
                <div>MAC： {vo.deviceMac}</div>
                <div>类型： {vo.deviceType}</div>
                <div>版本： {vo.firmwareVersion}</div>
            </div>
        }},
        {title:"电压信息",dataIndex:"voltage",width:130, render(v,vo){
            return <div>
                <div>电压： {vo.voltage} V</div>
                <div>电流： {vo.current} A</div>
                <div>功率： {vo.power} W</div>
                <div>使用电量： {vo.energy} kW</div>
            </div>
        }},
        {title:"门店信息",dataIndex:"shopName",width:160, render(v,vo){
            return <div>
                <div>门店： {vo.shopName}</div>
                <div>工位： {vo.stationName}</div>
                <div>官网设备： {vo.geekId ?<a onClick={GUtils.goGeekDetail.bind(this,vo.geekId)}>{vo.geekId}</a>:""}</div>
            </div>
        }},

        {title:"开关状态",dataIndex:"buttonEvent",width:80,
            render(v, vo){
                let isOn = [2,4,6,8].includes(v);
                return <DeviceSwitch checked={[2,4,6,8].includes(v)} onChange={Handlers.doDeviceApi.bind(this,vo,"buttonEvent")}>
                    <div className="w-300">
                        <b>插座通断电状态</b>
                        <li>1-按钮操作关</li>
                        <li>2-按钮操作开</li>
                        <li>3-MQTT操作关</li>
                        <li>4-MQTT操作开</li>
                        <li>7-TCP操作关</li>
                        <li>8-TCP操作开</li>
                    </div>
                </DeviceSwitch>
            }},
        {title:"按键锁",dataIndex:"buttonLock",width:80,
            render:(v,vo)=><DeviceSwitch checked={1==v} onChange={Handlers.doDeviceApi.bind(this,vo,"buttonLock")}>
                <div className="w-300">
                    <b>插座按键锁</b>
                    <li>1-按键锁关，可通过面板上按键控制插座通断</li>
                    <li>2-按键锁开，无法通过面板上按键控制插座通断，只能远程控制通断</li>
                </div>
            </DeviceSwitch>},

        {title:"Wifi锁",dataIndex:"wifiLock",width:80,
            render:(v,vo)=><DeviceSwitch checked={1==v} onChange={Handlers.doDeviceApi.bind(this,vo,"wifiLock")}>
                <div className="w-300">
                    <b>设备Wifi锁</b>
                    <li>1-配网锁关，可正常使用设备配网功能</li>
                    <li>2-配网锁开，无法使用设备配网功能</li>
                </div>
            </DeviceSwitch>},


        {title: '操作',dataIndex: 'id',width: 150,render(id,vo){
                return <div>
                    <a onClick={Handlers.doGetDeviceInfo.bind(this, vo, 1)}>基本信息</a>
                    <a onClick={Handlers.doGetDeviceInfo.bind(this, vo, 2)} className="ml-8 mr-8">电压信息</a><br/>
                    <a onClick={Handlers.updateMqtt.bind(this, vo)}>MQTT</a>
                    <Link to={`detail/edit?id=${id}`} className="ml-8 mr-8">编辑</Link>

                    {GUtils.renderEnabledLink(vo, "设备", "name", Action)}

                    <a onClick={Handlers.doReset.bind(this,vo)} className="ml-8 mr-8 danger">恢复出厂设置</a><br/>
                </div>
            }
        },
    ];
    return {
        ...window.CONFIG.getPagerConfig(Action), columns
    };
};


export default Config;
